<template>
  <div>
    <el-tag style="margin: 10px 10px">管理系统常用的分类数据</el-tag>
    <br>
    <br>
    <el-table
      :data="dictList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="dictId"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="dictName"
        label="名称"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="dictCode"
        label="编码"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="value"
        label="值">
      </el-table-column>

      <el-table-column
        prop="date"
        label="创建时间">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {listDicts} from '@/api/dict'

  export default {
    name: "listdict",
    created() {
      this.getDictList()

    },
    methods: {
      getDictList() {
        listDicts().then(res => {
          console.log(res)
          this.dictList = res.data
        })
      }
    },
    data() {
      return {
        dictList: [],
        tableData: [{
          dictId: 1,
          date: '2016-05-02',
          dictName: '王小虎',
          value: '上海市普陀区金沙江路 1518 弄',
          children: [{
            dictId: 2,
            date: '2016-05-02',
            dictName: '王小虎',
            value: '上海市普陀区金沙江路 1518 弄',
            children: null
          }, {
            dictId: 32,
            date: '2016-05-01',
            dictName: '王小虎',
            value: '上海市普陀区金沙江路 1519 弄',
            children: null

          }]
        }
        ],
      }
    }
  }
</script>

<style scoped>
  /deep/ .has-gutter th {
    background-color: #f8f8f9;
  }
</style>
